<template>
  <view>
    <view class="bar-height"></view>
    <view class="icon">
      <uni-icons v-if="status === 1"  type="back" size="40" @click="back"></uni-icons>
      <uni-icons v-show="status === 0" type="closeempty" size="40" color="#FFF"></uni-icons>
    </view>
    <view class="title">
      {{ titleText }}
    </view>
    <view class="msg">
      {{ msgText }}
    </view>
    <uni-forms class="baseForm" ref="baseForm" :modelValue="formData" v-show="status === 0">
      <uni-forms-item label="" >
        <uni-easyinput type="text" v-model="formData.username" placeholder="请输入您的账号" />
      </uni-forms-item>
      <uni-forms-item label="" >
        <uni-easyinput type="password" v-model="formData.password" placeholder="请输入您的密码" />
      </uni-forms-item>
    </uni-forms>

    <uni-forms class="baseForm" ref="baseForm" :modelValue="formData" v-show="status === 1">
      <uni-forms-item label="" >
          <image style="height: 80rpx;" mode="aspectFit" :src="img"></image>
      </uni-forms-item>
      <uni-forms-item label="" >
        <uni-easyinput type="text" v-model="formData.captcha" placeholder="请输入验证码" />
      </uni-forms-item>
    </uni-forms>

    <view class="button">
      <button :style="{backgroundColor: status===0?
      formData.username&&formData.password ? '#15191c' : '#f7f8fa': formData.captcha ? '#15191c' : '#f7f8fa',
      color:status===0?
      formData.username&&formData.password ? '' : '#dedfe1': formData.captcha ? '' : '#dedfe1'}" :loading="loading" :disabled="loading" type="primary" @click="onSubmit">{{ btnText }}</button>
    </view>
    <view class="uni-flex uni-row other" v-show="status === 0">
      <view class="flex-item " style="flex: 1">
        <span  @click="registerClick">申请注册</span>
      </view>
      <view class="flex-item weixin" @click="weixinClick">
        <uni-icons type="weixin" color="#42b126"></uni-icons>
        微信登录
      </view>
      <view class="bottom" v-show="status === 0">
        <view class="bottom-box">
          <radio-group @change="radioChange" style="width: auto;">
            <label class="radio"><radio value="1" :checked="agreement === '1'" @checked="agreement = 1"  color="#15191c" style="transform:scale(0.6)"/>已阅读并同意</label>
          </radio-group>
          <span style="color:rgb(41 121 255);">《服务及隐私条款》</span>
        </view>
      </view>
    </view>

    <view>
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="服务协议与隐私政策" content="为了更好的保障您的权益，请阅读并同意《服务及隐私条款》" @confirm="dialogConfirm"
                          ></uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="errorDialog" type="dialog">
        <uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="警告" :content="errorContent"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import userApi from "@/api/sys/user";
import toolApi from "@/api/toolApi";
import tool from "@/utils/tool";

export default {
  data() {
    return {
      loading: false,
      titleText: "账号登录",
      btnText: "登录",
      msgText: "",
      status: 0,//0 输入账号密码 1 输入验证码
      img: "",//验证码链接
      agreement: "",//是否同意协议
      captchaNeed: false,//是否需要验证码
      errorContent: "",//错误内容
      formData: {},

    }
  },
  onLoad() {
    // uni.showToast({icon: 'error', position: 'bottom', title: '接口错误'})
    // uni.showLoading({title: '请稍后',mask: true})
  },
  methods: {
    /**
     * 获取验证码
     * */
    async getCaptcha() {
      await toolApi.getCaptcha().then(res => {
        if (res.success) {
          this.img = res.data.base64Img
          this.formData.token = res.data.token
        }
      })
    },
    /**
     * 点击注册
     * */
    registerClick(){
      uni.showToast({icon: 'none', position: 'bottom', title: '暂无此功能'})
    },
    /**
     * 点击微信登录
     * */
    weixinClick(){
      uni.showToast({icon: 'none', position: 'bottom', title: '暂不支持'})
    },
    radioChange(e){
      this.agreement = e.detail.value
    },
    /**
     * 弹窗确定
     * */
    dialogConfirm(){
      this.agreement = '1'
    },
    /**
     * 登录按钮
     * */
    async onSubmit() {
      this.loading = true
      let param = this.formData
      if (this.status === 0) {
        if (!param.username || !param.password){
          this.loading = false
          return
        }
        if (this.agreement !== '1'){
          this.$refs.inputDialog.open()
          this.loading = false
          return
        }
        if (this.captchaNeed){
          this.titleText = "输入验证码"
          this.btnText = "登录"
          this.status = 1
          this.loading = false
          this.msgText = this.formData.username
          return;
        }
      } else if (this.status === 1) {

      }

      param.loginname = param.username
      await userApi.login(param).then(res => {
        if (res.success) {
          uni.showToast({icon: 'success', title: res.msg})
          uni.reLaunch({
            url: '/pages/index/index',
          })
        } else {
          if (res.msg === "验证码不能为空"){
            this.titleText = "输入验证码"
            this.btnText = "登录"
            this.status = 1
            this.loading = false
            this.msgText = this.formData.username
            this.captchaNeed = true
          }else{
            this.errorContent = res.msg
            this.$refs.errorDialog.open()
          }
          this.getCaptcha()
        }
      }).catch((e) => {
        console.log(e)
        uni.showToast({icon: 'error', title: e.errMsg})
      }).finally(() => {
        // this.formData.captcha = ""
        this.loading = false
      })

    },
    /**
     * 点击返回
     * */
    back(){
      this.status = 0
      this.titleText = "账号登录"
      this.btnText = "下一步"
      this.msgText = ""

    }
  }
}
</script>

<style lang="scss">
.title, .icon, .msg, .button, .other, .bottom, .baseForm{
  padding: 0 50rpx;
}

.title {
  font-size: 58rpx;
  font-weight: bold;
  line-height: normal;
  font-family: "微软雅黑 Light";
}

.button, .icon, .title{
  padding-top: 50rpx;
}
.msg{
  width: 100%;
  height: 90rpx;
  line-height: 70rpx;
  color: #8d8d8d;
}
.other{
  font-size: 28rpx;
  padding-top: 30rpx;
  color: #8d8d8d;
}
.weixin{
  color: #42b126;
}
.bottom{
  position: fixed;
  bottom: 10rpx;
  left: 0;
  font-size: 25rpx;
  color: #8d8d8d;
  width: 100%;
  box-sizing:border-box;
  display: flex;
  justify-content: space-evenly;
}
/deep/ .uni-label-pointer, .bottom-box{
  display: inline-flex !important;
  align-items: center  !important;;
}
/deep/ .is-input-border{
  border: none !important;;
  border-bottom: 1px solid #dcdfe6 !important;;
  border-radius: 0 !important;;
}
/deep/ .uni-easyinput__content-input{
  height: 90rpx !important;;
}
/deep/ .uni-easyinput__placeholder-class{
  font-size: 30rpx !important;;
}
/deep/ .uni-input-input{
  font-size: 35rpx !important;;
}
/deep/ .is-input-border .uni-icons{
  font-size: 40rpx !important;
}
</style>
